<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <div id="test1"></div>
    <script src="../lib//react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script src="../lib/prop-types.js"></script>
    <script type="text/babel">
        // 生命周期钩子
        //      初始化阶段：1.constructor；2.componentWillMount；3.render；4.componentDidMount；
        //      更新（setState）阶段：1.shouldComponentUpdate；2.componentWillUpdate；3.render；4.componentDidUpdate；
        //      强制更新（forceUpdate 可以不改状态直接更新）阶段：1.componentWillUpdate；2.render；3.componentDidUpdate；
        //      父组件 render（setState）子组件：1.	componentWillReceiveProps；2.shouldComponentUpdate；3.componentWillUpdate；4.render；5.componentDidUpdate；
        //      卸载组件：ReactDOM.unmountComponentAtNode 触发 componentWillUnmount
        //      
        //      componentDidMount：用于初始化、componentWillUnmount：用于关闭定时器之类的收尾工作
        class LifeCycle extends React.Component {
            constructor(props){
                super(props)
                this.state = { count: 1 }
                console.log('count constructor')
            }
            componentWillMount(){
                console.log('count componentWillMount')
            }
            render() {
                console.log('count render')
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <button onClick={this.add}>Add</button>
                        <button onClick={this.add}>unmount</button>
                        <button onClick={this.force}>forceUpdate</button>
                        
                    </div>
                )
            }
            componentDidMount() {
                console.log('count componentDidMount')
            }
            add = () => {
                let {count} = this.state
                this.setState({count:++count})
            }

            // --------------------------------------  更新   --------------------------------------------- //
          
            // 必须有返回值（true：更新，false： 不更新）
            shouldComponentUpdate(){
                console.log('count shouldComponentUpdate')
                return true
            }
            componentWillUpdate(){
                console.log('count componentWillUpdate') 
            }
            componentDidUpdate(){
                console.log('count componentDidUpdate')
            }

            // --------------------------------------  强制更新   --------------------------------------------- //
            force = ()=>{
                this.forceUpdate()
            }
            
            // --------------------------------------  卸载   --------------------------------------------- //
            componentWillUnmount() {
                console.log('count componentWillUnmount')
            }
           
        }
        
        class Child extends React.Component{
            componentWillReceiveProps(){
                 console.log('Child componentWillReceiveProps')
            }
            shouldComponentUpdate(){
                 console.log('Child shouldComponentUpdate')
                 return true
            }
            componentWillUpdate(){
                 console.log('Child componentWillUpdate')
            }
            componentDidUpdate(){
                 console.log('Child componentDidUpdate')
            }
            render(){
                console.log('Child render')
                return <div>
                        <p>child</p>
                    </div>
            }
        }
        class Parent extends React.Component{
            state = {status:false}
            changeStatus = ()=>{
                const {status} = this.state
                this.setState({status:!status})
            }
            render(){
                return <div>
                    <p>parent</p>
                    <Child status={this.state.status}/>
                    <button onClick={this.changeStatus}>changeStatus</button>
                </div>
            }
        }
        ReactDOM.render(<LifeCycle />, document.getElementById('test'))
        ReactDOM.render(<Parent />, document.getElementById('test1'))
    </script>
</body>

</html>